<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d2{
            width: 300px;
            height:300px;
            margin: 200px;
            background: #fdd;
            position: relative;
            overflow: hidden;
        }
        #d3{
            position: absolute;
            top:0;
            left: 0;
            width:100%;
            height:100%;
            backface-visibility:hidden;
            padding: 10px;
        }
       #d3:before{    /*穿过#d2的透明遮罩层*/
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background: rgba(255,255,255,0.5);
            content: "";
            opacity: 1;
            transform: scale(1.5,1.5) translate(300px,300px) rotate(45deg);
            /*transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-106%,0);*/
            transition: all .7s linear;
            /*pointer-events:none;  !*阻止该元素上的任何鼠标事件  这样鼠标放在该before上不会触发#d2的hover事件,或者在#d2上设置overflow=hidden也可以解决*!*/
        }
        #d1{
            width: 100px;
            height:100px;
            margin: 30px;
            background: #f00;
        }
        #d1:hover{
            background: #ffff00;
        }
        #d1:before,#d1:after{
            position: absolute;
            top: 10px;
            right: 10px;
            bottom: 10px;
            left: 10px;
            /* before和after是两个分离的内容区域，要想使两片区域合为一个整体就得用position定位而不能直接设置宽高*/
            /*display: inline-block;*/
            /*width:200px;*/
            /*height:200px;*/
            content: "";
            opacity: 0;
            transition: transform 0.4s ease-in,opacity 0.4s ease-in;
        }
        #d1:before{
            border-bottom:1px solid #f00;
            border-top:1px solid #f00;
            transform: scale(0,1);  /*border-top和border-bottom是横向的线，所以设置x方向缩放为0，最后才能达到从中间向两边生成的横线*/
                                    /*TODO 直线从中间向两端伸长这样来设置*/

        }
        #d1:after{
            border-right:1px solid #f00;
            border-left:1px solid #f00;
            transform: scale(1,0); /*border-left和border-right是纵向的线，所以设置y方向缩放为0，最后才能达到从中间向两边生成的竖线*/
        }
        #d2:hover #d1:before,#d2:hover #d1:after{  /*不能直接设置  #d1:hover #d1:before{  }*/
            transform: scale(1);
            opacity: 1;
        }
        #d2:hover #d3:before{
            opacity: 1;
            transform: scale(1.5,1.5) translate(-300px,-300px) rotate(45deg);
            /*transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,106%,0);*/
        }

        #d4{
            width:300px;
            height:300px;
            margin: 70px;
            background: #00aeef;
            position: relative;
            overflow: hidden;
        }
       #d4>h1{
           height:60px;
           line-height: 60px;
           background: #2b542c;
           text-align: center;
           position: absolute;
           bottom:-20px;
           left:0;
           width:100%;
        }
        #d4>p{
            background:rgba(0,0,0,.5);
            position: absolute;
            bottom:0;
            left:0;
            right: 0;
            top:100%;
            padding: 20px;
            height:219px;
            opacity: 0;
            color:#fff;
            transition: all .3s linear;
        }
        #d4:hover h1{
            top:-20px;
        }
        #d4:hover p{
            opacity: 1;
            top:45px;
        }


        .imgBox{
            width:350px;
            height:350px;
            overflow: hidden;
            position: relative;
            margin: 50px;
        }
        .effect{
            text-align: center;
            position: absolute;
            bottom: -210px;
            left: 0;
            background: rgba(100,100,100,.5);
            width: 100%;
            height: 100%;
        }
        .icon{
            width: 100%;
            list-style: none;
            overflow: auto;
            position: absolute;
            top:25px;
            left:25px;
        }
        .icon>li{
            float: left;
            margin-right: 20px;
        }
        .icon span{
            display: inline-block;
            width:50px;
            height:50px;
            background: url(images/social2.png) no-repeat -1px -1px #3b5998;
        }
        .icon span.tw{
            background: url(images/social2.png) no-repeat -1px -187px #55acee;
        }
        .icon span.fr{
            background: url(images/social2.png) no-repeat -1px -120px #ea4c89;
        }
        .effect>p{
            font-size: 30px;
            color:#fff;
            font-weight: bold;
        }
        .imgBox>img{
            transition: all 0.3s ease-in;
        }
        .imgBox:before,.imgBox:after{
            position: absolute;
            content: "";
            opacity: 1;
            transition: all 0.3s ease-in;
            pointer-events:none;
            z-index: 10; /*不加这个 图片放大时会吧before生成的那两根线盖住*/
        }
        .imgBox:before{
            border-bottom: 2px solid #f00;
            border-right: 2px solid #f00;
            top:100%;
            left:100%;  /*TODO 直线从一端向另一端伸长这样来设置top bottom left right值*/
            right:30px;
            bottom:30px;
        }
        .imgBox:after{
            border-left: 2px solid #f00;
            border-top: 2px solid #f00;
            top:30px;
            left:30px;
            right:100%;
            bottom:100%;
        }
        .imgBox:hover .effect{
            bottom:0;
        }
        .imgBox:hover .icon{
            top:50%;
            left:50%;
            transform: translate(-34%,-70%);
        }
        .imgBox:hover:before{
            opacity: 1;
            top:0;
            left:0;
        }
        .imgBox:hover:after{
            opacity: 1;
            bottom:0;
            right:0;
        }
        .imgBox:hover img{
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div id="d2">
        d2
        <div id="d1">d1</div>
        <div id="d3">d3</div>
    </div>

    <div id="d4">
        <h1>标题</h1>
        <p>border-top和border-bottom是横向的线，所以设置x方向缩放为0，最后才能达到从中间向两边生成的横线border-top和border-bottom是横向的线，所以设置x方向缩放为0，最后才能达到从中间向两边生成的横线</p>
    </div>

    <div class="imgBox">
        <img src="images/team4.jpg" alt="">
        <div class="effect">
            <ul class="icon">
                <li><a href=""><span class="fb"></span></a></li>
                <li><a href=""><span class="tw"></span></a></li>
                <li><a href=""><span class="fr"></span></a></li>
            </ul>
            <p>Lucy</p>
        </div>
    </div>
</body>
</html>